<template>
	<view>
		<image src="/static/my/top.png" mode="widthFix" style="width: 100%;"></image>
		<view class="headerView flex-row-flex-start" style="">
			<view class="flex-column-center" style="margin-right: 20rpx;">
				<image class="head" src="/static/my/head.png" mode=""></image>
			</view>
			<view class="">
				<view class="nickName">
					{{userinfo.nickName}}
				</view>
				<view class="position">
					身份：
					<text v-if="role==1">用户</text>
					<text v-if="role==2">店长</text>
					<text v-if="role==3">员工</text>
				</view>
			</view>
		</view>
		<view @click="toUrl('order/order')" v-if='role==2||role==3' class="flex-row-space-between" style="margin: 30rpx; margin-top: 120rpx;">
			<view class="order flex-column-center1">
				<image class="orderIcon" src="../../static/my/order1.png" mode=""></image>
				<view class="orderTitle" style="margin-top: 16rpx;">
					<text style="color: #ED6F1A;font-size: 56rpx;">2</text>
					单
				</view>
				<view class="orderTitle">
					当前项目
				</view>
			</view>
			<view class="order flex-column-center1">
				<image class="orderIcon" src="../../static/my/order2.png" mode=""></image>
				<view class="orderTitle" style="margin-top: 16rpx;">
					<text style="color: #ED6F1A;font-size: 56rpx;">2</text>
					单
				</view>
				<view class="orderTitle">
					完结项目
				</view>
			</view>
			<view class="order1 flex-column-center1">
				
			</view>
		</view>
		<view @click="loginClick()" class="bottomButton" style="margin-top: 100rpx;">
			退出登录
		</view>
		
	<tabbar index="4"></tabbar>


	</view>
</template>

<script>
	import {
		mapActions,
		mapState
	} from "vuex";
	import {
		getCurrentUserInfo
	} from '@/api/user.js'
	export default {
		components: {},
		computed: {

		},
		data() {
			return {
				isWorkbench:false,
				isDispatchh:false,
				roles:[],
				userinfo:{},
				value: 2,
				list: [{
						name: '认证绑定',
						icon: '/static/my/1.png',
						value: '',
						url: 'message/message'
					},
					{
						name: '邀请注册',
						icon: '/static/my/2.png',
						value: '',
						url: 'share/share'
					},
					{
						name: '个人资料',
						icon: '/static/my/2.png',
						value: '',
						url: 'profile/profile'
					},
					{
						name: '电子合同',
						icon: '/static/my/3.png',
						value: '',
						url: 'contract/contract'
					},
					{
						name: '我的保险',
						icon: '/static/my/4.png',
						value: '',
						url: 'profile/profile'
					},
					{
						name: '账号注销',
						icon: '/static/my/4.png',
						value: '',
						url: 'profile/profile'
					},

				],
				list1: [{
						name: '消息通知',
						icon: '/static/my/1.png',
						value: '',
						url: 'message/message'
					},
					{
						name: '我的保险',
						icon: '/static/my/2.png',
						value: '',
						url: 'insurance/insurance'
					},
					{
						name: '发薪记录',
						icon: '/static/my/2.png',
						value: '',
						url: 'salaryRecord/salaryRecord'
					},
					{
						name: '报名记录',
						icon: '/static/my/3.png',
						value: '',
						url: 'registrationRecord/registrationRecord'
					},
					{
						name: '个人资料',
						icon: '/static/my/4.png',
						value: '',
						url: 'profile/profile'
					},
					{
						name: '电子合同',
						icon: '/static/my/2.png',
						value: '',
						url: 'contract/contract'
					},
					{
						name: '离职申请',
						icon: '/static/my/3.png',
						value: '',
						url: 'resignation/resignation'
					},
					{
						name: '企业管理',
						icon: '/static/my/3.png',
						value: '',
						url: '/pages/workbench/businessManagement/businessManagement'
					},
					{
						name: '团队管理',
						icon: '/static/my/3.png',
						value: '',
						url: '/pages/workbench/supplierBill/supplierBill?type=3'
					},
					{
						name: '设置',
						icon: '/static/my/5.png',
						value: '',
						url: 'info'
					},
				
				],
				items: ['商品订单', '助理订单'],
				current: 0,
				backgroundColor: "#ffffff00",

			}
		},
		computed: {
			...mapState([
				'role'
			]),

		},
		onShow() {
				
				this.userinfo = uni.getStorageSync('userinfo')	
				this.getCurrentUserInfo()
		},
		onLoad(e) {
			// this.loadData()
		},
		//下拉刷新
		onPullDownRefresh() {


		},
		//加载更多
		onReachBottom() {

		},
		onPageScroll(e) {
			if (e.scrollTop > 20) {
				this.backgroundColor = "#FBF9FF"
			} else {
				this.backgroundColor = "#ffffff00"
			}
		},
		methods: {
			...mapActions(["changeBaseColor"]),
			loginClick(){
				uni.navigateTo({
					url:'/pages/login/login'
				})
			},
			
			//获取用户信息
			getCurrentUserInfo(){
				getCurrentUserInfo({
						
					})
					.then(res => {
					
					
						uni.setStorageSync('userinfo', res.user)
						uni.setStorageSync('roles', res.roles)
						// this.getDataRoles()
					})
					.catch(err => {
				
					})
			},
			tabbarClick(e) {
				if (e == 0) {
					uni.reLaunch({
						url: '/pages/workbench/workbench'
					})
				}
				if (e == 1) {
					uni.reLaunch({
						url: '/pages/dispatch/dispatch'
					})
				}
			},
			quitButtonClick() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			itemClick(item) {
				console.log(item.url)
				this.toUrl(item.url)
			},
			//跳转
			toUrl(url) {
				uni.navigateTo({
					url: url
				})
			},
		}
	}
</script>

<style lang="scss">
.headerView{
	position: relative;margin-top: -240rpx;
	padding: 0 42rpx;
}
.head{
	width: 140rpx;
	height: 140rpx;
	background: #F5F5F5;
	border-radius: 50%;
}
.order{
	padding-left: 26rpx;
	// width: 212rpx;
		width: 186rpx;
	height: 240rpx;
	background-color: #fff;
	background: url('../../static/my/order.png') ;
	background-size: 100% 100%;
}
.order1{
	padding-left: 26rpx;
	// width: 212rpx;
		width: 186rpx;
	height: 240rpx;
	// background-color: #fff;
	// background: url('../../static/my/order.png') ;
	// background-size: 100% 100%;
}
.nickName{
	font-weight: 400;
	font-size: 36rpx;
	color: #FFFFFF;
}
.position{
	margin-top: 10rpx;
	font-weight: 500;
	font-size: 24rpx;
	color: #FFFFFF;
}
.orderIcon{
	width: 58rpx;
	height: 58rpx;
}
.orderTitle{
	margin-top: 0rpx;
	font-weight: 400;
	font-size: 28rpx;
	color: #666666;
}
</style>